<template>
  <div>
    <div class="pageside">
      <div class="pageside-ch1">
        <el-row class="tac">
          <el-col :span="12">
            <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">
              <div v-for="item in goodsTypelist" :key="item.id">
                <el-menu-item :index="item.id" @click="test(item.id)">
                  <i class="el-icon-menu"></i>
                  <span slot="title">{{item.name}}</span>
                </el-menu-item>
              </div>
            </el-menu>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import remote from '@/utils/http'

export default {
  name: 'PageSide',
  data () {
    return {
      goodsTypelist: []
    }
  },
  created () {
    this.earntype()
  },
  methods: {
    // 获取分类
    earntype () {
      remote('earntype', false, {}).then(res => {
        console.log(res.data, '接收到的数据')
        if (res.code === 0) {
          this.goodsTypelist = res.data
          console.log(this.goodsTypelist[1].name)
        } else {
          alert('出错了')
        }
      })
    },
    test ($index) {
      console.log($index, 'hahhhh1')
    }
  }
}
</script>

<style >
.pageside {
  width: 13%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 8%;
  overflow-y: auto;
}
.pageside-ch1 {
  width: 200%;
}
</style>
